import { DashOutlined } from '@ant-design/icons';
import React, { useEffect, useState } from 'react';
import { connect, history } from 'umi';
import './index.less';
const WriteTab: React.FC<any> = (props: any) => {
  const { selectDocument } = props;
  const [selDocumentId, setSelDocumentId] = useState<any>(1);
  const { docList, last_document_id, writing_session_id, articles_expected } = props.conversation;

  useEffect(() => {
    if (last_document_id) {
      setSelDocumentId(last_document_id);
    }
  }, [last_document_id]);

  const selectDoc = (document: any, totalIndex: number) => {
    setSelDocumentId(document.document_id);
    selectDocument(document, totalIndex);
  };

  //跳转到全部文章页面
  const goAllArticle = () => {
    history.push('/allArticle?id=' + writing_session_id);
  };

  return (
    <div className="articleTabWrap">
      {docList &&
        docList.map((struct: any, index: number) => (
          <div key={index} className="vertical-doc-group">
            <div className="vertical-doc-title">写作思路{index + 1}</div>
            <div className="vertical-doc-box">
              {struct.documents &&
                struct.documents.map((document: any, indexId: number) => (
                  <div
                    className={
                      'vertical-doc-list' +
                      ' ' +
                      (selDocumentId === document.document_id ? 'active' : '')
                    }
                    key={indexId}
                    onClick={() =>
                      selectDoc(document, index * struct.documents.length + indexId + 1)
                    }
                  >
                    <span className="orderNum">NO.{document.doc_no}</span>
                    <span className="orderScore">{document.standard_score}</span>
                  </div>
                ))}
            </div>
          </div>
        ))}
      {docList ? (
        <div className="tab-more" onClick={goAllArticle}>
          <DashOutlined className="tab-icon" style={{ color: '#397BFF' }} />
          <span>查看全部</span>
          <span>{articles_expected}篇文章</span>
        </div>
      ) : (
        <></>
      )}
    </div>
  );
};

// export default WriteTab;
export default connect(({ conversation }) => ({ conversation }))(WriteTab);
